<template>
  <div class="update-info">
    <van-cell-group>
      <div class="upload-box">
        <div class="upload-label">头像</div>
        <div class="upload-right">
          <p>图片大小不能超过4M</p>
          <van-uploader :before-read="checkImg" :after-read="onRead" :max-size="4194304">
            <div class="upload-value">
              <img v-if="userInfo.Image" :src="userInfo.Image" alt>
              <span v-else>上传头像</span>
            </div>
          </van-uploader>
        </div>
      </div>
      <van-cell class="van-field" title="性别">
        <van-radio-group v-model="userInfo.Sex">
          <van-radio name="男">男</van-radio>
          <van-radio name="女">女</van-radio>
        </van-radio-group>
      </van-cell>
      <van-field
        :class="{'active':focusIdx==1}"
        v-model="userInfo.NickName"
        @focus="onFocus(1)"
        @blur="onBlur"
        label="昵称"
        placeholder="请输入昵称"
      />
      <van-field
        :class="{'active':focusIdx==2}"
        v-model="userInfo.Name"
        @focus="onFocus(2)"
        @blur="onBlur"
        label="姓名"
        placeholder="请输入姓名"
      />
       <van-field
        :class="{'active':focusIdx==3}"
        v-model="userInfo.Phone"
        @focus="onFocus(3)"
        @blur="onBlur"
        label="手机"
        placeholder="请输入手机号"
      />
      <van-field
        :class="{'active':focusIdx==4}"
        v-model="userInfo.Company"
        @focus="onFocus(4)"
        @blur="onBlur"
        label="公司"
        placeholder="请输入公司"
      />
      <van-field
        :class="{'active':focusIdx==5}"
        v-model="userInfo.Post"
        @focus="onFocus(5)"
        @blur="onBlur"
        label="职务"
        placeholder="请输入职务"
      />
      <van-field
        :class="{'active':focusIdx==6}"
        v-model="userInfo.Email"
        @focus="onFocus(6)"
        @blur="onBlur"
        label="邮箱"
        placeholder="请输入邮箱"
      />
      <van-field v-model="areaText" label="地区" readonly placeholder="请选择省市区" @click="onAreaPicker"/>
      <van-popup v-model="areaPickerShow" position="bottom">
        <van-area
          :area-list="areaList"
          :columns-num="3"
          title="选择省市区"
          @cancel="onAreaCancel"
          @confirm="onAreaConfirm"
        />
      </van-popup>
    </van-cell-group>
    <van-button class="save-btn" @click="UpdateUserInfo" size="large">保存</van-button>
  </div>
</template>

<script>
import $ from 'jquery';
import AreaData from '../assets/js/area';
export default {
  data() {
    return {
      focusIdx: null,
      areaPickerShow: false,
      areaList: AreaData,
      areaText: '',
      loginInfo: {},
      userInfo: {
        Image: '',
        NickName: '',
        Phone: '',
        Name: '',
        Sex: '',
        Age: 0,
        Company: '',
        Post: '',
        Email: '',
        Province: '',
        City: '',
        District: ''
      }
    };
  },
  created() {
    let token = this.$cookies.get('token');
    this.getLoginInfo(token);
  },
  methods: {
    UpdateUserInfo() {
        var that = this;
        let token = this.$cookies.get('token');
        let infoObj = {
            Image: that.userInfo.Image,
            NickName: that.userInfo.NickName,
            Sex: that.userInfo.Sex,
            Company: that.userInfo.Company,
            Post: that.userInfo.Post,
            Email: that.userInfo.Email,
            Province: that.userInfo.Province,
            City: that.userInfo.City,
            District: that.userInfo.District
        };
        $.ajax({
            type: 'POST',
            url: `${that.baseUrl}/api/account/SubmitExtendInfo`,
            headers: { 'Authorization': token },
            data: JSON.stringify(infoObj),
            success: function(res) {
                if (res.State) {
                    window.location.reload();
                } else {
                    that.$toast(res.Message);
                }
            }
        });
    },
    onAreaPicker() {
      this.areaPickerShow = true;
    },
    onAreaCancel() {
      this.areaPickerShow = false;
    },
    onAreaConfirm(value) {
      this.areaPickerShow = false;
      this.areaText =
        value[0].name + '省' + value[1].name + '市' + value[2].name;
      this.userInfo.Province = value[0].name;
      this.userInfo.City = value[1].name;
      this.userInfo.District = value[2].name;
    },
    onFocus(index) {
      this.focusIdx = index;
    },
    onBlur() {
      this.focusIdx = null;
    },
    checkImg(file) {
      if (file.size > 4194304) {
        this.$toast('图片大小不能超过4M，请重新上传');
        return false;
      } else {
        return true;
      }
    },
    onRead(file) {
      var that = this;
      if (file.file.size > 4194304) {
        var dataURL = file.content;
        var imaged = new Image();
        imaged.src = dataURL;
        imaged.onload = function() {
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          // 图片原始尺寸
          var originWidth = this.width;
          var originHeight = this.height;
          // 最大尺寸限制，可通过国设置宽高来实现图片压缩程度
          var maxWidth = 360,
            maxHeight = 360;
          // 目标尺寸
          var targetWidth = originWidth,
            targetHeight = originHeight;
          // 图片尺寸超过400x400的限制
          if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
              // 更宽，按照宽度限定尺寸
              targetWidth = maxWidth;
              targetHeight = Math.round(
                maxWidth * (originHeight / originWidth)
              );
            } else {
              targetHeight = maxHeight;
              targetWidth = Math.round(
                maxHeight * (originWidth / originHeight)
              );
            }
          }
          // canvas对图片进行缩放
          canvas.width = targetWidth;
          canvas.height = targetHeight;
          // 清除画布
          ctx.clearRect(0, 0, targetWidth, targetHeight);
          // 图片压缩
          ctx.drawImage(imaged, 0, 0, targetWidth, targetHeight);
          dataURL = canvas.toDataURL('image/jpg', 0.5);
          that.userInfo.Image = dataURL;
        };
      } else {
        this.userInfo.Image = file.content;
      }
    },
    getLoginInfo(token) {
      var that = this;
      $.ajax({
        type: 'GET',
        url: that.baseUrl + '/api/account/get',
        headers: { Authorization: token },
        success: function(res) {
          if (res.State) {
            that.userInfo.Image = res.Image || '';
            that.userInfo.NickName = res.NickName || '';
            that.userInfo.Name = res.Name || '';
            that.userInfo.Phone = res.Phone || '';
            that.userInfo.Sex = res.Sex || '男';
            that.userInfo.Age = res.Age || 0;
            that.userInfo.Company = res.Company || '';
            that.userInfo.Post = res.Post || '';
            that.userInfo.Province = res.Province || '';
            that.userInfo.City = res.City || '';
            that.userInfo.District = res.District || '';
            that.areaText = `${that.userInfo.Province}${that.userInfo.Province ? '省' : ''}${that.userInfo.City}${that.userInfo.City ? '市' : ''}${that.userInfo.District}`;
            if (res.Unionid) {
              localStorage.setItem('Unionid', res.Unionid);
              that.$store.commit('SET_UNIONID', res.Unionid);
            }
            if (res.OpenID) {
              localStorage.setItem('OpenId', res.OpenID);
              that.$store.commit('SET_OPENID', res.OpenID);
            }
          } else {
            that.$toast(res.Message);
          }
        }
      });
    }
  }
};
</script>

<style>
.mb-media .van-tabs__line {
  background-color: #37acff;
}
.mb-media .van-cell-group.van-hairline--top-bottom {
  width: 100%;
}
.mb-media .van-tab.van-tab--active {
  color: #37acff;
}
.mb-media .upload-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 5px 4vw;
  margin: 0 0 10px 0;
  line-height: normal;
  position: relative;
  background-color: #fff;
  color: #333;
  font-size: 1em;
}
.mb-media .upload-right {
  display: flex;
  align-items: center;
}
.mb-media .upload-right > p {
  color: #999;
  font-size: 0.8em;
  margin: 0 10px 0 0;
}
.mb-media .upload-value {
  display: flex;
  width: 16vw;
  height: 16vw;
  justify-content: center;
  align-items: center;
  background: #eee;
  border-radius: 50%;
  color: #999;
  overflow: hidden;
}
.mb-media .upload-value span {
  font-size: 0.8em;
  font-weight: normal;
}
.mb-media .upload-value img {
  width: 16vw;
  height: 16vw;
}
.mb-media .van-hairline--top-bottom::after {
  border-width: 0;
}
.mb-media .van-cell:not(:last-child)::after {
  border: 0;
}
.mb-media .van-cell.van-field {
  padding: 0 4vw;
  height: 40px;
  line-height: 40px;
  margin: 0 0 10px 0;
}
.mb-media .van-field .van-cell__title {
  max-width: 30%;
}
.mb-media .van-cell.van-field input {
  height: 39px;
  border: 1px solid #dcdfe6;
  padding: 0 10px;
  outline: none;
  border-radius: 4px;
  line-height: 39px;
  text-align: right;
}
.mb-media .van-cell.van-field input::placeholder {
  color: #999;
}
.mb-media .van-cell.van-field.error input {
  border-color: #f44;
}
.mb-media .van-cell.van-field.active input {
  border-color: #37acff;
}
.mb-media .van-field__button {
  padding-left: 8px;
}
.mb-media .van-field__button .van-button.van-button--primary.van-button--small {
  width: 90px;
  height: 35px;
  line-height: 35px;
  background: #37acff;
  border: 0;
  font-size: 0.9em;
}
.mb-media
  .van-field__button
  .van-button.van-button--primary.van-button--small:disabled {
  background: #999;
}
.mb-media .van-cell .van-radio-group {
  display: flex;
  justify-content: flex-end;
}
.mb-media .van-cell .van-radio {
  margin: 0 0 0 15px;
}
.mb-media .van-cell .van-radio .van-icon-checked {
  color: #37acff;
}
.mb-media .van-radio .van-radio__input {
  line-height: 1em;
}
.mb-media .van-tab__pane,
.update-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.update-info{
    width: 100%;
}
.mb-media .save-btn {
  width: 92vw;
  border: 0;
  background: #37acff;
  color: #fff;
  line-height: normal;
  border-radius: 4px;
  margin: 30px 0 20px 0;
}
</style>
